<template>
    <el-card
        class="tool-card"
        @click="$emit('click')"
        @mouseenter="hoverId = id"
        @mouseleave="hoverId = null"
        :style="cardStyle"
    >
        <div class="card-header">
            <div
                class="title-text"
                :style="titleTextStyle"
                @mouseenter="hoverId = id"
                @mouseleave="hoverId = null"
            >
                {{ title }}
            </div>

<!--            <el-icon
                class="star-icon"
                :class="{ visible: hoverId === id }"
                @click.stop="$emit('collect', title)"
            >
                <Star />
            </el-icon>-->
        </div>

        <div class="desc-text" :style="descTextStyle">{{ introduction }}</div>
    </el-card>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
// import { Star } from '@element-plus/icons-vue'
import { useDark } from '@vueuse/core'

defineProps({
    id: [String, Number],
    title: String,
    introduction: String,
})

const hoverId = ref(null)
const isDark = useDark()

// 监听屏幕宽度变化
const windowWidth = ref(window.innerWidth)
function onResize() {
    windowWidth.value = window.innerWidth
}
onMounted(() => {
    window.addEventListener('resize', onResize)
})
onUnmounted(() => {
    window.removeEventListener('resize', onResize)
})

// 动态计算卡片样式
const cardStyle = computed(() => {
    let maxWidth = '15rem'
    let padding = '0.9rem 1rem'

    if (windowWidth.value < 480) {
        maxWidth = '100%'
        padding = '0.5rem 0.6rem'
    } else if (windowWidth.value < 768) {
        maxWidth = '12rem'
        padding = '0.7rem 0.8rem'
    }

    return {
        width: '100%',
        maxWidth,
        padding,
        cursor: 'pointer',
        borderRadius: '1.75rem',
        backdropFilter: 'blur(6px)',
        background: isDark.value ? 'rgba(50, 50, 50, 0.8)' : 'rgba(255, 255, 255, 0.8)',
        transition: 'all 0.3s',
        boxSizing: 'border-box',
    }
})

const titleTextStyle = computed(() => ({
    color: hoverId.value === null ? (isDark.value ? '#ffffff' : '#444') : '#409EFF',
    transition: 'color 0.3s',
}))

const descTextStyle = computed(() => ({
    color: isDark.value ? '#ffffff' : '#444',
    transition: 'color 0.3s',
}))
</script>

<style scoped>
.tool-card {
    box-sizing: border-box;
    transition: box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
}
.tool-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.title-text {
    font-weight: bold;
    font-size: 1rem;
    word-break: break-word;
    transition: color 0.3s;
}

/*.star-icon {
    font-size: 1.5rem;
    padding: 0.3rem;
    border-radius: 50%;
    transition: opacity 0.3s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.star-icon.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.star-icon:hover {
    color: #409EFF;
}

.dark .star-icon {
    background-color: #333;
    color: #fff;
    border-color: #666;
}*/

.desc-text {
    font-size: 0.9rem;
    line-height: 1.3rem;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s;
}
</style>
